<!-- 子路由联系 -->
<template>
  <div class="news-container">
    <div class="news-list">
      <p v-for="item in newsList" :key="item.id">
        <!-- to 两种写法 -->
        <!-- <router-link :to="{
          name: 'newsDetail',
          query: {
            id: item.id,
            content: item.content
          }
        }"> -->
        <router-link :to="{
          name: 'newsDetail',
          params: {
            id: item.id,
            content: item.content
          }
        }">
          {{ item.content }}
        </router-link>
      </p>
    </div>
    <div class="news-content">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { type News } from '@/types/new'

const newsList: News = reactive([
  { id: 1, title: '张三', content: '我是新闻1' },
  { id: 2, title: '李四', content: '我是新闻2' },
  { id: 3, title: '王五', content: '我是新闻3' }
])
</script>

<style lang="scss" scoped>
.news-container {
  display: flex;
}

.news-content {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  margin-left: 20px;
  background-color: rgb(247, 229, 232);
}
</style>
